/*
 * @Author: yangzonglong
 * @Date: 2021-01-21 09:14:23
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-05-24 16:00:06
 * @Auditor:
 */
import React, { useCallback, useState, useRef } from 'react';
import { Button as AntdButton } from 'antd';
import { NativeButtonProps } from 'antd/es/button/button';
import roleAuth from './../../utils/routePermit/routePermit';
import DeleteBtn from './DeleteBtn';
import { Icon } from '@library';

interface IExtendElement {
  Delete: React.FC<NativeButtonProps>;
  Create: React.FC<NativeButtonProps>;
  Submit: React.FC<NativeButtonProps>;
  Download: React.FC<NativeButtonProps>;
  Save: React.FC<NativeButtonProps>;
  View: React.FC<NativeButtonProps>;
}

const Btn: React.FC<NativeButtonProps> = (props) => {
  const isClick = useRef(false);
  const timeout = useRef<any>(null);
  const [loading, setLoading] = useState(false);

  const _onClick = useCallback(
    (event) => {
      if (timeout.current) return;

      timeout.current = setTimeout(async () => {
        if (!props.onClick || isClick.current) return;
        isClick.current = true;

        if (props.onClick.constructor.name === 'AsyncFunction') {
          setLoading(true);

          try {
            await props.onClick(event);
          } catch (error) {
            console.log(error);
          }

          setLoading(false);
          isClick.current = false;
          timeout.current = false;
        } else {
          props.onClick(event);
          isClick.current = false;
          timeout.current = false;
        }
      }, 200);
    },
    [props]
  );

  return <AntdButton {...props} loading={loading} onClick={_onClick} />;
};

const Button: React.FC<NativeButtonProps> & IExtendElement = (props) => {
  const routePermitInPath = roleAuth();
  const permit = routePermitInPath.edit;

  return <Btn type="primary" {...props} disabled={!permit} />;
};

Button.Create = (props) => {
  const routePermitInPath = roleAuth();
  const permit = routePermitInPath.create;

  return permit ? (
    <Btn type="primary" {...props}>
      {typeof props.children !== 'object' ? (
        <>
          <Icon icon="&#xe635;" style={{ marginRight: '8px' }} />
          <span>{props.children || window.$app.t('create')}</span>
        </>
      ) : (
        props.children || window.$app.t('create')
      )}
    </Btn>
  ) : null;
};

Button.Delete = (props) => {
  return <DeleteBtn {...props}>{props.children}</DeleteBtn>;
};

Button.Submit = (props) => {
  const routePermitInPath = roleAuth();
  const permit = routePermitInPath.edit;

  return permit ? (
    <Btn type="primary" {...props}>
      {props.children || window.$app.t('submit')}
    </Btn>
  ) : null;
};

Button.Download = (props) => {
  const routePermitInPath = roleAuth();
  const permit = routePermitInPath.download;

  return permit ? (
    <Btn type="primary" {...props}>
      {props.children || window.$app.t('download')}
    </Btn>
  ) : null;
};

Button.Save = (props) => {
  const routePermitInPath = roleAuth();
  const permit = routePermitInPath.edit;

  return permit ? (
    <Btn type="primary" {...props}>
      {props.children || window.$app.t('save')}
    </Btn>
  ) : null;
};

Button.View = (props) => {
  const routePermitInPath = roleAuth();
  const permit = routePermitInPath.view;

  return permit ? (
    <Btn type="primary" {...props}>
      {props.children || window.$app.t('view')}
    </Btn>
  ) : null;
};

export default Button;
